<template>
  <div>
    <!--头部样式-->
    <NavBar style="z-index: 10;">
      <van-icon slot="left" name="arrow-left" @click="taozhuang"/>
      <div slot="title" class="van-nav-bar__title van-ellipsis">我的订单</div>
    </NavBar>
    <van-tabs v-model="active">
      <van-tab title="全部">
        <div v-for="item of list" :key="item.id" style="height:210px">
        <div class="hello" style="height:2rem;line-height:2rem;background: #fff;">
          <div class="icon">
            <van-image
            round
            width="1.5rem"
            height="1.5rem"
            style="margin-top: .25rem;"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
            />
          </div>
          <div class="p" style="margin-top:.35rem;font-size:.9rem">
            <p>{{item.dpname}}</p>
          </div>
          <div style="float: right;
            position: relative;
            top: -9px;
            font-size: .6rem;
            margin-right: 10px;">
            <p>交易成功</p>
          </div>
        </div>
          <van-card
            :num="item.num"
            :price="item.price"
            :desc="item.desc"
            :title="item.title"
            :thumb="item.thumb"
            style="text-align: -webkit-left;"
          />
          <div style="font-size: .6rem;float:right;margin-right: 10px;height: 32px;line-height:32px;margin-top: -10px;">
          <P style="float:left;">共{{item.num}}件商品 合计:</p>
          <p style="float:left;font-size: .8rem;
          line-height:24px;">￥</p>
          <p style="float:left;font-size: 1.2rem;line-height:7px;">4.00</p>
        </div>
        <br>
        <div style="border: 1px solid;
          height: 1.5rem;
          float: right;
          position: absolute;
          right: 0;
          padding: 0px 9px;
          font-size: .6rem;
          border-radius: 1rem;
          margin-top: 10px;
          margin-right: 10px;">
          <P style="line-height: 5px;" @click="dianji">再次购买</p>
        </div>
        <div style="border: 1px solid;
          height: 1.5rem;
          float: right;
          position: absolute;
          right: 0;
          padding: 0px 9px;
          font-size: .6rem;
          border-radius: 1rem;
          margin-top: 10px;
          margin-right: 88px;">
          <P style="line-height: 5px;" @click="dianji">删除订单</p>
        </div>
        </div>
      </van-tab>
      <van-tab title="已完成">内容 2</van-tab>
      <van-tab title="待发货">内容 3</van-tab>
      <van-tab title="待收货">内容 4</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import NavBar from '@/components/navbar'
export default {
  name: 'order',
  components: { NavBar },
  data () {
    return {
      active: 0,
      list: [{
        id: '01',
        dpname: '天猫官方旗舰店',
        num: '3',
        price: 2.00,
        desc: '111',
        title: '222',
        thumb: 'https://img.yzcdn.cn/vant/t-thirt.jpg'
      }, {
        id: '02',
        dpname: '天猫官方旗舰店',
        num: '2',
        price: 2.00,
        desc: '111',
        title: '222',
        thumb: 'https://img.yzcdn.cn/vant/t-thirt.jpg'
      }, {
        id: '03',
        dpname: '天猫官方旗舰店',
        num: '2',
        price: 2.00,
        desc: '111',
        title: '222',
        thumb: 'https://img.yzcdn.cn/vant/t-thirt.jpg'
      }, {
        id: '04',
        dpname: '天猫官方旗舰店',
        num: '2',
        price: 2.00,
        desc: '111',
        title: '222',
        thumb: 'https://img.yzcdn.cn/vant/t-thirt.jpg'
      }, {
        id: '05',
        dpname: '天猫官方旗舰店',
        num: '2',
        price: 2.00,
        desc: '111',
        title: '222',
        thumb: 'https://img.yzcdn.cn/vant/t-thirt.jpg'
      }]
    }
  },
  methods: {
    taozhuang () {
      this.$router.push('/user')
    },
    dianji () {
      alert('点击事件')
    }
  },
  mounted () {
    this.active = this.$route.query.active
  }
}
</script>

<style scoped>
  .van-search {
    margin-top: 46px;
    padding: 5px 5px;
  }
  .van-nav-bar__text:active {
    background-color: #eff7fa;
  }
  .handImg {
    width: 30px;
    position: relative;
    top: 8px;
    border-radius: 50%;
  }
  .van-tabs {
    position: relative;
    margin-top: 46px;
}
.hello{
    height: 3rem;
    line-height: 3rem;
    overflow: hidden;
    width: 100%;
}
.icon{
    /* width: 10%; */
    float: left;
    margin-left: 10px;
}
.p{
    text-align: left;
    /* width: 100%; */
    position: relative;
    top: -1.2rem;
    float: left;
    left: .2rem;
}
.van-tabs__content {
  position: absolute;
  top: 0;
  width: 100%;
}
</style>
